作为一个工作一年的菜鸟，在公司做了几个外包项目，也接触到了不同形式的web开发。其实也没多少，就是javaweb开发和HTML5移动开发，这两者在页面展示的时候的解决方案还是有所不同的。

1、vo+el表达式

　　在javaweb开发中，我们使用的是SSM框架（Spring,SpringMVC,Mybatis）。一些页面的跳转，我们通过返回SpringMVC的ModelAndView来实现，并采用这种方式来展示页面。

　　其基本思想是：后端构造实体类，这个实体类里面包含目标页面所需要的所有属性，这个实体类由一张表或多张表中对应的字段组成，俗称vo（value object）。属性的值可以是String，int，Map，List等等，也就是说vo里面又可以套vo，因此这种方式非常灵活好用。

　　但是这种方式，把要展示的内容和控制混杂在一起，html里边混杂了大量el控制标签，很不美观。并且，利用el表达式生成html代码，这是一个在服务器端执行的动作，在服务器端解析完成之后，才发送到客户端浏览器上，这样做会占用大量服务器资源，而且速度缓慢。

示例如下：

                 ${advert.advert_id}        ${advert.advert_name}        
              ${advert.advert_url}                    
      
       不可用
                  
      
       可用
                      ${advert.advert_index}        
                          
                      
                   
                  
                      
                   
                  
                  
     

2、ajax+JSON拼接html

　　HTML5开发移动端界面，我们采用这种方式进行前后端交互，这也是目前比较热门一种方式。

　　其基本思想是：通过ajax发起请求，服务端返回一个json字符串，这个json字符串中包含前端需要展示的信息，前端拿到json串后，通过拼接html来完成界面的展示。

示例如下：

$.ajax({    url: "localhost:8080/demo/advertList.do",    type: "post",    async: true,    dataType: "json",    success: function(data) {        var content = "";        for (var i = 0, len = data.length; i < len; i++) {            content += '
     
      ' +                '
      
       
      
' +                '
      
       
      
' +                '
      
       
      
' +                '
      
       
      
' +                '
      
       
      
' +                '
     
     
      
' +                '
      
      
     
';        }        document.getElementById("ul_list").innerHTML = content;    },    error: function(xhr, type, errorThrown) {        console.log(type);    }});

　　这样做的好处就是，服务端只负责返回数据，而页面的展示由前端来完成，服务器承受的压力明显减少。但是缺点也很明显，那就是字符串中拼接了大量的html标签，可维护性极低。拼接html，打乱了html原有的层次结构，根本看不出来原来的结构，整个就是一坨字符串堆积在那里。

3、javascript模板引擎

　　javascript模板引擎可以很好的保留html原有格式，并且保留js构建html速度快的特点。我们之前做移动端开发，了解了几款模板引擎后，选择了artTemplate.js，因为他更加符合我们的需求并且性能相对较高。

示例如下：

html部分

javascript部分：

var advertList = template("advert_tmpl", data);document.getElementById("ul_list").innerHTML = advertList;

　　可以很明显地看到，采用javascript模板引擎来实现页面的展示。不仅html结构清晰，而且javascript部分只需要处理逻辑，不需要进行过多的html拼接操作。而且artTemplate.js文件只有6KB左右，同时具有良好的可扩展性，是一款不可多得的javascript模板引擎。